<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 600px;
      height: 161px;
      border: 1px solid #000;
      margin: 100px auto;
      overflow: hidden;
    }

    ul {
      list-style: none;
      width: 1800px;
      height: 161px;
      background: #000;
    }

    ul>li {
      float: left;
    }
  </style>
</head>

<body>

  <div>
    <ul>
      <li><img src="https://via.placeholder.com/300x161/0000FF" alt=""></li>
      <li><img src="https://via.placeholder.com/300x161/9900FF" alt=""></li>
      <li><img src="https://via.placeholder.com/300x161/0099FF" alt=""></li>
      <li><img src="https://via.placeholder.com/300x161/000099" alt=""></li>
      <li><img src="https://via.placeholder.com/300x161/0000FF" alt=""></li>
      <li><img src="https://via.placeholder.com/300x161/9900FF" alt=""></li>
    </ul>
  </div>




  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    $(function () {

      let move = 0;
      let timer;

      function autoPlay() {
        timer = setInterval(function () {
          move += -3;
          if (move <= -1200) {
            move = 0
          }
          $("ul").css("marginLeft", move);
        }, 50)

      }

      autoPlay()

      $('li').hover(function () {
        clearInterval(timer)
        $(this).siblings().fadeTo(100, 0.5);
        $(this).fadeTo(100, 1)
      }, function () {
        autoPlay();
        $("li").fadeTo(100, 1);
      })

    })
    // 0.定义变量保存偏移位

    // 1.让图片滚动起来
    
    // 1.1 定义变量保存定时器

    // 1.2 封装成函数

    // 1.3 设置步幅

    // 1.4 设置超出重置

    // 1.5 把样式绑定到dom上

    // 1.6 调用函数

    // 2.监听li的移入和移出事件

    // 停止滚动

    // 给非当前选中添加蒙版

    // 去除当前选中的蒙版

    // 继续滚动

    // 去除所有的蒙版
  </script>

</body>

</html>